<template>
  <div class="boa">
    <!-- 商机区域 -->
    <Head title="商 机" id="backstyle"> </Head>
    <Banner :id="bannerId" class="bannerId"></Banner>
    <div class="title title-center l-h">
      <!-- 用户单位文字区域 -->
      <div class="umit">
        <div class="zhong tac">{{ teatitle }}</div>
      </div>
    </div>
    <!-- 版心区域 -->
    <div class="war">
      <div class="area-center title-center">
        <!-- 商机总区域 -->
        <!-- 1.名酒区域 -->
        <div class="bottom" v-if="finewine">
          <!-- 1.定位的名酒 -->
          <div class="small m-t-07">
            <!-- 原点区域 -->
            <div class="num">1.</div>
            <!-- 内容区域 -->
            <div
              class="right"
              @click="businewine(citywine, citysub, teatitle, ID)"
            >
              {{ citywine }}
            </div>
          </div>
          <!-- 1.全国各省和中国十大的名酒 -->
          <div class="small  m-t-07" v-for="(item, index) in wine" :key="index">
            <!-- 原点区域 -->
            <div class="num">{{ index + 2 }}.</div>
            <!-- 内容区域 -->
            <div
              class="right"
              @click="nationwidetea(item, ID, Headtitle, eleventea)"
            >
              {{ item.institueType }}
            </div>
          </div>
        </div>
        <!-- 2.名茶区域 -->
        <div class="bottom" v-else>
          <!-- 2.1定位的名茶 -->
          <div class="small  m-t-07">
            <!-- 原点区域 -->
            <div class="num">1.</div>
            <!-- 内容区域 -->
            <div
              class="right"
              @click="businetea(citytea, citysub, teatitle, ID)"
            >
              {{ citytea }}
            </div>
          </div>
          <!-- 2.2写死的名茶 -->
          <div class="small  m-t-07" v-for="(item, index) in tea" :key="index">
            <!-- 原点区域 -->
            <div class="num">{{ index + 2 }}.</div>
            <!-- 内容区域 -->
            <div
              class="right"
              @click="nationwidetea(item, ID, Headtitle, eleventea)"
            >
              {{ item.institueType }}
            </div>
          </div>
        </div>
        <!-- 3.下方内容区域 -->
        <div class="Instructions">
          <div
            class="xi m-t-07"
            v-for="(item, index) in title"
            :key="index"
            @click="context(item, ID)"
          >
            <div class="le">
              <div class="yu"></div>
            </div>
            <div class="zh">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFatherText } from "@/api/index";
import Head from "@/components/public/HeadPage.vue";
import Banner from "@/components/Home/BannerView.vue";
export default {
  data() {
    return {
      address: [],
      tea: [{ institueType: "全国各省名茶" }, { institueType: "海外名茶" }],
      wine: [{ institueType: "全国各省名酒" }, { institueType: "海外名酒" }],
      title: [],
      Headtitle: "商机",
      eleventea: "海外名茶",
      teatitle: this.$route.query.title, //标题
      ID: this.$route.query.id, //标题的id
      citytea: sessionStorage.getItem("provincesub") + "名茶",
      citysub: sessionStorage.getItem("provincesub"),
      citywine: sessionStorage.getItem("provincesub") + "名酒",
      finewine: false, //隐藏美酒区域
    };
  },
  components: {
    Head,
    Banner,
  },
  computed: {
    bannerId() {
      switch (this.$route.query.id) {
        // 名茶
        case "f7a84efa-274a-49de-8bf4-b30fd66cfd61":
          return "7";
        // 名酒
        case "57f93baf-975d-414b-a170-ac66c2a22277":
          return "10";
        default:
          break;
      }
    },
  },
  mounted() {
    getFatherText({
      Id: this.$route.query.id,
    }).then((res) => {
      if (res.data.code == 200) {
        this.title = res.data.data;
      }
    });

    if (this.$route.query.id == "57f93baf-975d-414b-a170-ac66c2a22277") {
      this.finewine = true;
    } else {
      this.finewine = false;
    }
  },
  methods: {
    //定位的名茶
    businetea(city, citysub, title, id) {
      this.$router.push({
        path: "/businesstwo",
        query: { city, citysub, title, id },
      });
    },
    //全国各省和中国名茶
    nationwidetea(item, id, Headtitle, city) {
      if (
        item.institueType == "全国各省名茶" ||
        item.institueType == "全国各省名酒"
      ) {
        this.$router.push({
          path: "/largenation",
          query: {
            title: item.institueType,
            id,
            Headtitle,
          },
        });
      } else if (item.institueType == "海外名茶") {
        this.$router.push({
          path: "/businesstwo",
          query: {
            title: item.institueType,
            id,
            city,
          },
        });
      } else {
        this.$router.push({
          path: "/businesswine",
          query: {
            title: item.institueType,
            id,
            city,
          },
        });
      }
    },
    //内容跳转
    context(item, typeId) {
      this.$router.push({
        path: "/teadetails",
        query: {
          id: item.id,
          title: item.name,
          typeId,
        },
      });
    },
    //定位的美酒
    businewine(city, citysub, title, id) {
      this.$router.push({
        path: "/businesswine",
        query: { city, citysub, title, id },
      });
    },
  },
};
</script>

<style scoped>
.boa {
  width: 100%;
  min-height: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 图标区域 */

/* 版心区域 */
.center {
  width: 98%;
  height: 4.2rem;
}
/* 商机总区域 */

.title {
  width: 100%;

}

.bottom {
  /* margin-top: 10px; */
}
/* 用人单位区域 */
.umit {
  width: 100%;
}
.xiao {
  width: 100%;
  margin-top: 0.05rem;
  display: flex;
  align-items: center;
}
/* 左边区域 */
.left {
  width: 0.1rem;
}
.xiao .left img {
  width: 0.1rem;
  height: 0.3rem;
}
/* 中间区域 */
.zhong {
  height: 100%;

}
.small {
  width: 100%;
  display: flex;
}
/* 原点区域 */
.num {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.06rem;
  padding-top: 0.02rem;
}

/* 内容区域 */
.right {
  width: 94%;
  height: 100%;
  padding-left: 0.05rem;
}

.Instructions {
  width: 100%;
  min-height: 0.4rem;
  margin-top: 40px;
}
.xi {
  width: 100%;
  display: flex;
  align-items: center;
}
/* 左边区域 */

.le {
  width: 5%;
  height: 0.3rem;
  margin: 0 0.07rem 0 0.03rem;
}
.yu {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  background-color: black;
  margin-top: 0.05rem;
}
/* 中间区域 */
.zh {
  width: 95%;
  height: 100%;
  line-height: 0.3rem;
}
</style>